<template>
  <div>

    <div style="width: 100%;">
      <Button class="m-r-5px" type="primary" @click="openMapGeoJsonForm('add')"><Icon type="md-add"/> 新建地图源数据</Button>
      <Tooltip placement="top" content="刷新数据">
        <Button class="m-r-5px" type="primary" @click="loadMapGeoJsons">
          <Icon type="md-refresh"/>
        </Button>
      </Tooltip>

      <div class="float-right">
        <Input class="m-r-5px" v-model="searchFormData.adcode" placeholder="AdCode" style="width: 150px;" @on-enter="loadMapGeoJsons"/>
        <Input class="m-r-5px" v-model="searchFormData.alias_name" placeholder="地图名称" style="width: 150px;" @on-enter="loadMapGeoJsons"/>
        <Select class="m-r-5px" :transfer="true" v-model="searchFormData.level" clearable placeholder="等级" style="width: 100px;">
          <Option value="province">省份</Option>
          <Option value="city">城市</Option>
          <Option value="country">国家</Option>
        </Select>
        <Button class="m-r-5px" @click="loadMapGeoJsons">
          <Icon type="md-search"/>
          搜索
        </Button>
        <Button @click="clearSearchForm">清空</Button>

      </div>
    </div>
    <div class="clearfix"></div>
    <div class="m-b-10px"></div>

    <Table :columns="columns" :data="tableData" :loading="loading"></Table>
    <Page size="small" class="m-t-5px float-right" :total="pageTotal" :current.sync="pageIndex" :page-size="pageSize"
          show-elevator show-total @on-change="loadMapGeoJsons">
    </Page>

    <MapGeoJsonForm ref="mapGeoJsonForm" @refreshDataList="loadMapGeoJsons"></MapGeoJsonForm>
  </div>
</template>

<script>

import ManageMixin from "@/mixin/ManageMixin";
import MapGeoJsonForm from "./MapGeoJsonForm";

export default {
  name: "MapGeoJsonManage",
  components: {MapGeoJsonForm},
  mixins: [ManageMixin],
  props: {},
  data() {
    return {
      loading: false,
      searchFormData: {
        adcode: '',
        level: '',
        alias_name: ''
      },
      columns: [
        {
          title: 'AdCode',
          key: 'adcode',
          width: 150,
        },
        {
          title: '等级',
          key: 'level',
          width: 150,
          render: (h, params) => {
            if (params.row.level == 'province') {
              return h('span', '省份')
            } else if (params.row.level == 'city') {
              return h('span', '城市')
            } else if (params.row.level == 'country') {
              return h('span', '国家')
            } else if (params.row.level == 'world') {
              return h('span', '世界')
            }
          }
        },
        {
          title: '地图名称',
          key: 'alias_name',
          width: 140
        },
        {
          title: '备注',
          key: 'remark'
        },
        {
          title: '创建日期',
          key: 'create_date',
          width: 170,
        },
        {
          title: '操作',
          key: 'action',
          width: 180,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  size: 'small',
                  type: 'primary',
                  icon: 'md-create'
                },
                'class': {
                  'm-r-5px': true
                },
                on: {
                  click: () => {
                    this.openMapGeoJsonForm('edit', params.row.id)
                  }
                }
              }),
              h('Poptip', {
                props: {
                  confirm: true,
                  transfer: true,
                  placement: 'top-end',
                  title: '您确定要删除此项吗？'
                },
                style: {},
                on: {
                  'on-ok': () => {
                    this.deleteMapGeoJson(params.row.id)
                  }
                }
              }, [
                h('Button', {
                  props: {
                    size: 'small',
                    type: 'error',
                    icon: 'md-trash'
                  }
                },)
              ])
            ]);
          }
        }
      ],
      tableData: [],
    }
  },
  mounted() {
    this.loadMapGeoJsons()
  },
  methods: {
    loadMapGeoJsons() {
      this.loading = true
      this.$PnApi.MapGeoJsonApi.getMapGeoJsonByPage(
          this.pageIndex, this.pageSize, this.searchFormData.adcode, this.searchFormData.level, this.searchFormData.alias_name).then(result => {
        this.tableData = result.data.payload.list;
        this.pageTotal = result.data.payload.total;
        this.loading = false
      })
    },
    openMapGeoJsonForm(type, id) {
      this.$refs.mapGeoJsonForm.init(type, id)
    },
    deleteMapGeoJson(id) {
      this.$PnApi.MapGeoJsonApi.deleteMapGeoJson(id).then(result => {
        if (result.data.success) {
          this.loadMapGeoJsons();
          this.$Message.success(result.data.message)
        }
      })
    },
    clearSearchForm() {
      this.searchFormData = {
        adcode: '',
        level: '',
        alias_name: ''
      }
      this.loadMapGeoJsons();
    },
  },
  computed: {},
  watch: {}
}
</script>

<style scoped>
.ivu-form-item {
  margin-bottom: 0px !important;
}
</style>
